<extend name="base/index" />

<block name="style">
<!-- BEGIN PAGE LEVEL STYLES -->
<link href="__assets__/global/plugins/jquery-file-upload/blueimp-gallery/blueimp-gallery.min.css" rel="stylesheet"/>
<link href="__assets__/global/plugins/jquery-file-upload/css/jquery.fileupload.css" rel="stylesheet"/>
<link href="__assets__/global/plugins/jquery-file-upload/css/jquery.fileupload-ui.css" rel="stylesheet"/>
<!-- END PAGE LEVEL STYLES -->
<!-- BEGIN THEME STYLES -->
<link href="__assets__/global/css/components-rounded.css" id="style_components" rel="stylesheet" type="text/css">
<link href="__assets__/global/css/plugins.css" rel="stylesheet" type="text/css">
<link href="__assets__/admin/layout3/css/layout.css" rel="stylesheet" type="text/css">
<link href="__assets__/admin/layout3/css/themes/default.css" rel="stylesheet" type="text/css" id="style_color">
<link href="__assets__/admin/layout3/css/custom.css" rel="stylesheet" type="text/css">
<!-- END THEME STYLES -->
    <style>
        .webuploader-element-invisible{
			width: 0px;
		}
    </style>
</block>

<block name="content">
<!-- BEGIN PAGE CONTAINER -->
<div class="page-container">
	<!-- BEGIN PAGE HEAD -->
	<div class="page-head">
		<div class="container">
			<!-- BEGIN PAGE TITLE -->
			<div class="page-title">
				<h1>照片上传 <small>请按格式上传</small></h1>
			</div>
			<!-- END PAGE TITLE -->
			<!-- BEGIN PAGE TOOLBAR -->
			<div class="page-toolbar">
			</div>
			<!-- END PAGE TOOLBAR -->
		</div>
	</div>
	<!-- END PAGE HEAD -->
	<!-- BEGIN PAGE CONTENT -->
	<div class="page-content">
		<div class="container">
			<!-- BEGIN SAMPLE PORTLET CONFIGURATION MODAL FORM-->
			<div class="modal fade" id="portlet-config" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
							<h4 class="modal-title">Modal title</h4>
						</div>
						<div class="modal-body">
							 Widget settings form goes here
						</div>
						<div class="modal-footer">
							<button type="button" class="btn blue">Save changes</button>
							<button type="button" class="btn default" data-dismiss="modal">Close</button>
						</div>
					</div>
					<!-- /.modal-content -->
				</div>
				<!-- /.modal-dialog -->
			</div>
			<!-- /.modal -->
			<!-- END SAMPLE PORTLET CONFIGURATION MODAL FORM-->
			<!-- BEGIN PAGE BREADCRUMB -->
			<ul class="page-breadcrumb breadcrumb">
				<li>
					<a href="#">首页</a><i class="fa fa-circle"></i>
				</li>
				<li>
					<a href="form_fileupload.html">报名</a>
					<i class="fa fa-circle"></i>
				</li>
				<li class="active">
					 上传照片
				</li>
			</ul>
			<!-- END PAGE BREADCRUMB -->
			<!-- BEGIN PAGE CONTENT INNER -->
			<div class="portlet light">
				<div class="portlet-body">
					<div class="row">
						<div class="col-md-12">
							<div class="note note-danger">
								<p>
									 目前一个人只能上传一张照片.<br>
									 Supports cross-domain, chunked and resumable file uploads and client-side image resizing.<br>
									 Works with any server-side platform (PHP, Python, Ruby on Rails, Java, Node.js, Go etc.) that supports standard HTML form file uploads.
								</p>
							</div>
							<div id="fileupload">
								<!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload -->
								<div class="row fileupload-buttonbar">
									<div class="col-lg-7">
										<!-- The fileinput-button span is used to style the file input field as button -->
										<span class="btn green fileinput-button">
										<i class="fa fa-plus"></i>
										<span>
										选择图片 </span>
										<input type="file" name="files[]" multiple="">
										</span>
										<!--
										<button type="submit" class="btn blue start">
										<i class="fa fa-upload"></i>
										<span>
										开始上传 </span>
										</button>
										<button type="reset" class="btn warning cancel">
										<i class="fa fa-ban-circle"></i>
										<span>
										取消上传 </span>
										</button>
										<button type="button" class="btn red delete">
										<i class="fa fa-trash"></i>
										<span>
										删除 </span>
										</button>
										<input type="checkbox" class="toggle">
										<!-- The global file processing state -->
										<span class="fileupload-process">
										</span>
									</div>
									<!-- The global progress information -->
									<div class="col-lg-5 fileupload-progress fade">
										<!-- The global progress bar -->
										<div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100">
											<div class="progress-bar progress-bar-success" style="width:0%;">
											</div>
										</div>
										<!-- The extended global progress information -->
										<div class="progress-extended">
											 &nbsp;
										</div>
									</div>
								</div>
								<!-- The table listing the files available for upload/download -->
								<table role="presentation" class="table table-striped clearfix">
								<tbody class="files">
								<notempty name="picture">
								<volist name="picture" id="vo">
								<tr class="template-upload fade in">
									<td>
										<span class="preview">
											<img id="WU_FILE_0" src="{$vo.path}" width="80" height="69">
										</span>
									</td>
									<td>
										<p class="name">{$vo.name}</p>
										<strong class="error text-danger label label-danger"></strong>
									</td>
									<td>
										<p class="size">{$vo.size} KB</p>
										<div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" style="display: none;">
											<div class="progress-bar progress-bar-success" style="width: 100%;"></div>
										</div>
									</td>
									<td>
										<a href="/Home/Update/edit_img.html" class="btn blue start-jianqie"><i class="fa fa-upload-jianqie"></i> <span> 剪切</span></a>
									</td>
								</tr>
								</volist>
								</notempty>
								</tbody>
								</table>
							</div>
							<div class="panel panel-success">
								<div class="panel-heading">
									<h3 class="panel-title">注意</h3>
								</div>
								<div class="panel-body">
									<ul>
										<li>
											 上传的照片大小不能超过 <strong>5 MB</strong> (单个文件).
										</li>
										<li>
											 只能上传 (<strong>JPG, GIF, PNG</strong>) 的照片故事。
										</li>
									</ul>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- END PAGE CONTENT INNER -->
		</div>
	</div>
	<!-- END PAGE CONTENT -->
</div>
<!-- END PAGE CONTAINER -->

</block>

<block name="script">
<!-- BEGIN PAGE LEVEL PLUGINS -->
<script src="__assets__/global/plugins/fancybox/source/jquery.fancybox.pack.js"></script>
<!-- END PAGE LEVEL PLUGINS-->

<!--[if (gte IE 8)&(lt IE 10)]>
    <script src="__assets__/global/plugins/jquery-file-upload/js/cors/jquery.xdr-transport.js"></script>
    <![endif]-->
<!-- END:File Upload Plugin JS files-->
<script src="__assets__/global/scripts/metronic.js" type="text/javascript"></script>
<script src="__assets__/admin/layout3/scripts/layout.js" type="text/javascript"></script>
<script src="__assets__/admin/layout3/scripts/demo.js" type="text/javascript"></script>

<script>
        jQuery(document).ready(function() {
        // initiate layout and plugins
        Metronic.init(); // init metronic core components
Layout.init(); // init current layout
Demo.init(); // init demo features
        //FormFileUpload.init();
        });
    </script>
<script src="__assets__/global/plugins/Webuploader/webuploader.js" type="text/javascript"></script>
	<script type="text/javascript">
	     // 实例化
        uploader = WebUploader.create({
            pick: '.fileinput-button',
			auto: true,
			fileNumLimit:1,

            dnd: '.page-content',
            paste: '.page-content',
            swf: '__assets__/global/plugins/Webuploader/Uploader.swf',

            server: '{:U('Home/Update/img')}',
			
			formData:{
				uid : {:session('xuehao')},
			},
			
			accept: {
				title: 'Images',
				extensions: 'gif,jpg,jpeg,bmp,png',
				mimeTypes: 'image/*'
			},
        });
		
		//添加队列
		uploader.on('fileQueued', function(file){
			var t = "<tr class=\"template-upload fade in\"><td><span class=\"preview\"><img id=\""+file.id+"\" src=\"\" width=\"80\" height=\"69\"></canvas></span></td><td><p class=\"name\">"+file.name+"</p><strong class=\"error text-danger label label-danger\"></strong></td><td><p class=\"size\">"+file.size+" KB</p><div class=\"progress progress-striped active\" role=\"progressbar\" aria-valuemin=\"0\" aria-valuemax=\"100\" aria-valuenow=\"0\"><div class=\"progress-bar progress-bar-success\" style=\"width:0%;\"></div></div></td><td><a href=\"{:U('Home/Update/edit_img')}\" class=\"btn blue start-jianqie\"><i class=\"fa fa-upload-jianqie\"></i> <span> 剪切</span></a></td></tr>";
			$(t).appendTo('.files');
			var imgs = $('#'+file.id);
			uploader.makeThumb(file,function(error,src){
				if(error){
					imgs.replaceWith('<span>NO</span>');
					return;
				}
				imgs.attr('src',src);
			});
		});
		
		//上传成功 
		uploader.on('uploadSuccess', function(file,response){
			if(response.status == 1){
				$('<div class="Metronic-alerts alert alert-success fade in"/>').text('上传成功，请点击剪切，开始剪切图片 - ' +new Date()).appendTo('#fileupload');
				$('.progress').hide();
				$('.fileinput-button').text(' 继续上传');
				
			}else{
				$(".name").after("<div><span class=\"label label-danger\">错误</span> SyntaxError: Unexpected token N</div>");
			}
		});
		
		//上传状态
        uploader.onUploadProgress = function( file, percentage ) {
			$('.progress-bar-success').css( 'width', Math.round( percentage * 100 ) + '%' );
        };
	</script>
<!-- END JAVASCRIPTS -->
</block>